<!--
 * @Author: 段文棚
 * @Date: 2021-10-06 14:18:58
 * @LastEditTime: 2021-10-09 14:55:59
 * @LastEditors: 段文棚
 * @FilePath: \form-design-vue3\src\view\formDesign.vue
 * @Description: xxxx
-->
<template>
  <el-row :gutter="20">
    <!-- 左侧组件列表 -->
    <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
      <ul>
        <li
          class="formCmpType"
          v-for="(item, itemIndex) in componentsList"
          :key="itemIndex"
        >
          <div class="title">{{ item.title }}</div>
          <ul>
            <vue-draggable
              animation="300"
              :group="{
                name: 'form',
                pull: 'clone',
                put: false,
              }"
              chosenClass="chosenClass"
              dragClass="dragClass"
              ghostClass="ghostClass"
              :sort="false"
              :list="item.list"
              item-key="name"
            >
              <template #item="{ element }">
                <li class="formCmp" @click="formCmpClick(element)">
                  {{ element.label }}
                </li>
              </template>
            </vue-draggable>
          </ul>
        </li>
      </ul>
    </el-col>
    <!-- 中间操作区域 -->
    <el-col :xs="15" :sm="15" :md="15" :lg="15" :xl="15">
      <div class="operating-area">
        <el-tooltip class="item" effect="dark" content="预览" placement="top">
          <el-button type="text" @click="handlePreviewForm()"><i class="el-icon-view"></i></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="清空" placement="top">
          <el-button type="text" @click="handleClearForItemList()"
            ><i class="el-icon-delete"></i
          ></el-button>
        </el-tooltip>
      </div>
      <form-center ref="formCenter"></form-center>
    </el-col>
    <!-- 右侧配置项 -->
    <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
      <form-config :formCmpId="formCmpId"></form-config>
    </el-col>
    <!-- 表单预览 -->
    <el-dialog
      v-model="dialogVisible"
      title="表单预览"
      width="40%"
    >
      <form-viewer :formInfo='formInfo'></form-viewer>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >Confirm</el-button
          >
        </span>
      </template>
    </el-dialog>
  </el-row>
</template>

<script>
import formCmpConfig from "@/config/formCmpConfig.js";
import formCenter from "@/components/formCenter.vue";
import formConfig from "@/components/formCmpConfig.vue";
import formViewer from "@/view/formViewer.vue"
import { ref } from "@vue/reactivity";
import { getCurrentInstance, provide } from "@vue/runtime-core";
export default {
  name: "form-design",
  components: { formCenter, formConfig,formViewer },
  setup() {
    let formDesign = ref(getCurrentInstance()); // 获取实例并响应式
    provide("formDesign", formDesign); // 注入
    let componentsList = ref(formCmpConfig); // 左侧组件列表数据
    let formCmpId = ref({
      id: null, // 当前选中的组件的id
    });
    let myIndex = ref({
      index: null, // 当前选中的组件的下标
    });
    // 表单的属性
    let formInfo = ref({
      formSize: "mini",
      formItemLabelWidth: 40,
      forItemList: [], // 表单中的组件
    });
    // 定义ref=formCenter
    const formCenter = ref(null);
    // 组件点击新增
    const formCmpClick = (cmp) => {
      formCenter.value.handelFormCmpClickAdd(cmp);
    };
    // 弹窗展示
    const dialogVisible=ref(false)
    // 预览
    const handlePreviewForm=()=>{
        dialogVisible.value=true
    }
    // 清空
    const handleClearForItemList = () => {
      formInfo.value.forItemList = [];
    };
    return {
      componentsList,
      formCmpId,
      formInfo,
      myIndex,
      formCenter,
      formCmpClick,
      dialogVisible,
      handlePreviewForm,
      handleClearForItemList,
    };
  },
};
</script>

<style lang="less" scoped>
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
/*定义要拖拽元素的样式*/
.ghostClass {
  border-top: 5px solid #4395ff;
}
/* 选中的样式 */
.chosenClass {
  opacity: 0.7;
}
/* 拖动的样式 */
.dragClass {
  background-color: #fff !important;
  opacity: 0.7 !important;
  border: 2px dashed #4395ff !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
.el-row {
  margin: 0 !important;
  padding-top: 50px;
  .el-col {
    padding: 0 !important;
    margin: 0 12px;
    border: 1px solid #ccc;
  }
}
.formCmpType {
  text-align: left;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  .title {
    padding: 10px;
    background-color: rgba(107, 107, 107, 0.1);
  }
  > ul {
    > div {
      width: 100%;
      display: flex;
      padding: 0 10px;
    }
    .formCmp {
      font-size: 12px;
      color: rgb(85, 85, 85);
      min-width: 100px;
      text-align: center;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin: 5px;
      padding: 5px;
      &:hover {
        cursor: move;
        color: #4395ff;
        box-shadow: 1px 1px 2px 1px #4395ff;
      }
    }
  }
}
.operating-area {
  padding-left: 20px;
  i {
    font-size: 16px;
    color: rgb(131, 131, 131);
    font-weight: 700;
    &:hover {
      color: #4395ff;
    }
  }
}
/deep/.el-tabs__nav-scroll {
  padding-left: 30px;
}
/deep/.el-tabs__content {
  padding: 0 10px;
}
/deep/.el-form-item__label {
  text-align: left;
}
</style>
